<template>
  <div class="qs-container">
    
    <el-row type="flex" class="title-css">
      <el-col v-if="pq.type === 2">
        <div>
          {{ "选择题"}}
        </div>
      </el-col>
      <el-col v-else-if="pq.type === 3">
        <div>
          {{ "填空题" }}
        </div>
      </el-col>
      <el-col v-else-if="pq.type === 4">
        <div>
          {{ "判断题" }}
        </div>
      </el-col>
      <el-col v-else-if="pq.type === 5">
        <div>
          {{ "简答题" }}
        </div>
      </el-col>
      <el-col class="difficulty"> {{"难度："+pq.difficulty}}</el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="1" class="id" >{{pq.id+'.'}}</el-col>
      <el-col :span="20" class="title">{{ pq.title }}</el-col>
      <el-col :span="3" class="score"> {{"分数："+pq.qt_body.scoreDefault[0]}}  </el-col>
    </el-row>
    <div class="anster-css">
      <el-row type="flex">
        <el-col :span="1"></el-col>
        <el-col :span="22">
        <div class="item-box" v-if="pq.type === 2">
          <el-radio
            class="choose"
            v-for="(selections, index) in pq.qt_body.selections"
            :key="index"
            :index="index"
            :label="index"
            style="display: block"
            >{{ selections }}
          </el-radio>
          <div class="answer">
            <div
              v-for="(answers, index) in pq.qt_body.answers"
              :key="index"
              :index="index"
              :label="index"
              style="display: block"
              >答案：{{ answers }}
            </div>
          </div>
        </div>

        <div class="item-box" v-if="pq.type === 3">
          <div class="tinakong">答案：{{ pq.qt_body.answers }}</div>
        </div>
        <div class="item-box" v-if="pq.type === 4">
          <el-radio>{{ pq.qt_body.answers }} </el-radio>
        </div>
        <div class="item-box" v-if="pq.type === 5">
          <div>答案：{{ pq.qt_body.answers }}</div>
        </div>
        </el-col>
      </el-row>
    </div>
    <div class="delect">
    <el-button @click="deleteSign">删除</el-button>
  </div>
  </div>
  
</template>
<script>
 import axiosinstance from "@/util/http";

export default {
  name: "pq",
  props: {
    pq: {
      type: Object,
      default: function () {
        return {
        
        };
      },
    },
  },
  methods: {
   async deleteSign() {
       this.user = this.$store.getters.getuser;
      console.log("efa", this.user);
     this.tp_id=this.$route.query.tp_id;
      console.log("afafqa", this.tp_id);
      this.qt_id = this.pq.id;
      console.log("555",this.pq.id);
      let res = await axiosinstance({
        url: '/paper/deletetestquestions',
        method: 'post',
        data:{ 
          tp_id: this.tp_id,
          qt_ids: [this.qt_id],
          username: this.user.username,
          
        }
      });
      if(res){
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        this.$router.go(0);
        this.$emit("deleteqt",this.pq.id);
      }else{
        this.$message({
          showClose: true,
          message: '删除失败',
          type: 'err'
        });
      }
    },
   },
};
</script>

<style scoped>
.qs-container {
  margin: 30px auto;
  width: 70%;
  /* //height: 100px;
//background-color: #d5eb87; */
  border-top: 2px solid;
  padding-left: 10px;
}

.anster-css {
  text-align: left;
  margin-top: 15px;
}
.title-css {
  font-weight: bolder;
  text-align: left;
  margin-bottom: 15px;
}
.id{
 padding: 0;
}
.title{
  text-align: start;
}
.difficulty{
  font-weight:normal;
  text-align: end;
}
.score{
  font-weight:normal;
  text-align: end;
}
.answer {
  margin-top: 10px;
}

.delect {
  text-align: right;
}
</style>